<template>
    <div class="app-container">
        <!--  这里的模糊查询是根据昵称进行模糊查询的  -->
        <el-form :model="queryParams" ref="form" :inline="true">
            <el-form-item label="字典名称" class="item" prop="dictName" >
                <el-input v-model="queryParams.dictName" placeholder="请输入字典名称"  clearable style="width: 240px" @keyup.enter.native="load" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search"  @click="load">搜索</el-button>
                <el-button icon="refresh">重置</el-button>
            </el-form-item>
        </el-form>
        <!--按钮区域    -->
        <div style="margin:5px">
            <el-button type="primary" plain icon="plus" >新增</el-button>
            <el-button type="success" plain icon="edit"  :disabled="single"  >修改</el-button>
        </div>
        <!-- 列表区-->
        <el-table :data="tableData"  :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="dictId" sortable label="ID"></el-table-column>
            <el-table-column prop="dictName" label="字典名称"></el-table-column>
            <el-table-column prop="dictType" label="字典类型">
                <template #default="scope">
                    <router-link :to="'/data/' + scope.row.dictId" @click.native='getDictData(scope.row)'  class="link-type">
                        <span>{{ scope.row.dictType }}</span>
                    </router-link>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作"  width="260">
                <template #default="scope">
                    <!--v-if="scope.row.userId !== 1"-->
                    <div  >
                        <el-button type="text" icon="edit" >修改</el-button>
                        <!-- 自带提示框的删除按钮 -->
                        <el-popconfirm title="确定删除吗？" >
                            <template #reference>
                                <el-button size="small" icon="delete" type="text" >删除</el-button>   <!-- 注意此处如果方法加在删除按钮上，那么在弹出提示框点击确定的时候就无法执行删除操作了，所以这里需要将删除的方法，挂到弹框的确定按钮上 -->
                            </template>
                        </el-popconfirm>
                    </div>
                </template>

            </el-table-column>
        </el-table>
        <!--列表分页-->
        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"> //双引号里面的total是定义一个变量，在这里定义了，就需要在下面data里面初始化一下
            </el-pagination>
        </div>
    </div>
</template>

<script>

    import request from "@/utils/request";
    import { ElMessage } from 'element-plus'

    export default {
        name: "dict",
        data() {
            return {

                title: '',
                dialogVisible: false,
                total: 0,  //默认10条
                tableData: [],
                single:true,
                currentPage:1,
                pageSize:5,
                // 查询参数
                queryParams: {},
                form:{},
                item: {}
            }
        },

        //页面加载完立即执行的方法
        mounted() {
            this.load()
        },

        methods:{
            //查询方法
            load() {
                request.get("/sys/dict/type/list", {
                    params:{
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        dictName: this.queryParams.dictName
                    }
                }).then(res => {
                    if(res.code==0){
                        this.tableData = res.data.list
                        this.total = res.data.total
                    }

                })
            },

            getDictData (row) {
                this.item.path='/data/' + row.dictId;
                this.item.menuCode="dictdata",
                this.item.menuName="字典数据",
                this.$store.commit('selectMenu', this.item)
            },



            //在上面的data中，pageSize和currentPaage都有默认值，这里要触发分页，需要重新根据变量赋值
            //改变当前每页条数触发
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },

            //改变当前页码触发
            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },

            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.userId)
                this.single = selection.length!=1
            },
        }

    }
</script>

<style scoped lang="scss">
    #app-container {
        padding: 15px;
    }

    a {
        text-decoration: none;
    }

    .router-link-active {
        text-decoration: none;
    }

    .link-type,
    .link-type:focus {
        color: #337ab7;
        cursor: pointer;

    &:hover {
         color: rgb(32, 160, 255);
     }
    }
</style>
